<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />

  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: rgba(0, 0, 0, 0.54);
    }

    .main {
      margin: 0 auto;
      width: calc(100% - 32px);
      max-width: 512px;
      margin: 14vh auto 0;
    }

    #main-title {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    #main-error-code {
      font-size: 12px;
    }

    #main-description {
      margin-bottom: 16px;
      line-height: 1.5rem;
    }

    ul {
      margin-top: 0;
    }

    #main-icon {
      background-repeat: no-repeat;
      width: 72px;
      height: 72px;
      margin-bottom: 40px;
    }
  </style>
</head>

<body>
  <div class="main">
    <div id="main-icon"></div>
    <div id="main-title"></div>
    <div id="main-description"></div>
    <div id="main-error-code"></div>
  </div>

  <script>
    document.body.style.backgroundColor = window.theme['pages.backgroundColor'];

    const url = window.errorURL;

    document.title = url;

    const errorCodeEl = document.getElementById('main-error-code');
    const titleEl = document.getElementById('main-title');
    const descriptionEl = document.getElementById('main-description');
    const iconEl = document.getElementById('main-icon');

    if (window.theme['pages.lightForeground']) {
      document.body.style.color = 'rgba(255, 255, 255, 0.54)';
      iconEl.style.filter = 'invert(1)';
    }

    if (window.location.href.split('/').length === 4) {
      errorCode = window.location.href.split('/')[3];
    }

    const pageUnresolvedIcon = '';

    const info = {
      '-6': {
        title: 'Your file was not found',
        description: `It may have been moved or deleted.`,
        code: 'ERR_FILE_NOT_FOUND',
      },
      '-10': {
        title: 'This site can’t be reached',
        description: `The webpage at <b>${url}</b> might be temporarily down or it may have moved permanently to a new web address.`,
        code: 'ERR_ACCESS_DENIED',
      },
      '-105': {
        title: 'This site can’t be reached',
        description: `<b>${url}</b>’s server IP address could not be found.`,
        code: 'ERR_NAME_NOT_RESOLVED',
      },
      '-106': {
        title: 'No internet',
        description: `Try: <ul><li>Checking the network cables, modem, and router</li><li>Reconnecting to Wi-Fi</li></ul>`,
        code: 'ERR_INTERNET_DISCONNECTED',
      },
      '-108': {
        title: 'This site can’t be reached',
        description: `The webpage at <b>${url}</b> might be temporarily down or it may have moved permanently to a new web address.`,
        code: 'ERR_ADDRESS_INVALID',
      },
      '-109': {
        title: 'This site can’t be reached',
        description: `<b>${url}</b> is unreachable.`,
        code: 'ERR_ADDRESS_UNREACHABLE',
      },
      '-300': {
        title: 'This site can’t be reached',
        description: `The webpage at <b>${url}</b> might be temporarily down or it may have moved permanently to a new web address.`,
        code: 'ERR_INVALID_URL',
      },
      '-379': {
        title: 'This site can’t be reached',
        description: `The webpage at <b>${url}</b> might be temporarily down or it may have moved permanently to a new web address.`,
        code: 'ERR_HTTP_RESPONSE_CODE_FAILURE',
      },
    }

    const { title, description, code, icon } = info[errorCode];
    titleEl.textContent = title;
    descriptionEl.innerHTML = description;
    errorCodeEl.textContent = code;
    iconEl.style.backgroundImage = `url(${pageUnresolvedIcon})`;
  </script>
</body>

</html>